<template>
  <div class="product-container">


    <el-row :gutter="20">
      <el-col v-for="product in productList" :key="product.id" :xs="12" :sm="8" :md="6" :lg="6" :xl="6">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" class="product-card">
          <!-- <div class="product-image-container" @click="handleProductClick(product)"> -->
          <div class="product-image-container">
            <img :src="getImageUrl(product.imageId)" class="product-image" :alt="product.name">
            <!-- <div v-if="product.stock <= 0" class="sold-out-tag">已售罄</div> -->
          </div>
          <div style="padding: 14px;">
            <div class="product-name">{{ product.name }}</div>
            <div v-if="false" class="product-desc">{{ product.description }}</div>
            <div class="product-price-container">
              <span class="product-price">¥{{ product.price }}</span>
              <span v-if="product.originalPrice" class="product-original-price">¥{{ product.originalPrice }}</span>
            </div>
            <div class="product-actions">
              <el-button type="primary" size="mini" :disabled="product.stock <= 0"
                @click.stop="handleAddToCart(product)">
                加入购物车
              </el-button>
              <el-button v-if="false" size="mini" @click.stop="handleViewDetail(product)">
                查看详情
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <el-dialog :title="currentProduct.name" :visible.sync="dialogVisible" width="70%">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-carousel height="400px">
            <el-carousel-item v-for="(image, index) in currentProduct.images" :key="index">
              <img :src="image" class="detail-image" :alt="currentProduct.name">
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="12">
          <h2>{{ currentProduct.name }}</h2>
          <div class="detail-price-container">
            <span class="detail-price">¥{{ currentProduct.price }}</span>
            <span v-if="currentProduct.originalPrice" class="detail-original-price">¥{{ currentProduct.originalPrice
            }}</span>
          </div>
          <div class="detail-stock">库存: {{ currentProduct.stock }}件</div>
          <div class="detail-sales">已售: {{ currentProduct.sales }}件</div>
          <div class="detail-desc">
            <h3>商品描述</h3>
            <p>{{ currentProduct.detailDescription }}</p>
          </div>
          <div class="detail-actions">
            <el-input-number v-model="quantity" :min="1" :max="currentProduct.stock" size="medium" />
            <el-button type="primary" size="medium" :disabled="currentProduct.stock <= 0"
              @click="handleAddToCart(currentProduct)">
              加入购物车
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getProductList } from '@/api/product'
import storage from '@/utils/storage'

export default {
  name: 'Home',
  data() {
    return {
      productList: [],
      keyword: '',
      dialogVisible: false,
      currentProduct: {
        name: '',
        price: 0,
        originalPrice: 0,
        stock: 0,
        sales: 0,
        detailDescription: '',
        image: ''
      },
      quantity: 1
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getImageUrl(imageId) {
      return `http://localhost:8000/api/files/download/${imageId}`
    },
    getList() {
      this.$api.product.listByName(this.keyword).then(res => {
        if (res.code === 200) {
          this.productList = res.data
        }
      })
    },
    handleProductClick(product) {
      this.currentProduct = product
      this.dialogVisible = true
    },
    handleViewDetail(product) {
      this.currentProduct = product
      this.dialogVisible = true
    },
    handleAddToCart(product) {
      this.$api.cart.increase(storage.getLoginUser().id, product.id).then(res => {
        if (res.code === 200) {
          this.$message({
            message: `添加成功`,
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.product-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.product-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.product-image-container {
  position: relative;
  height: 0;
  padding-bottom: 66.67%;
  /* 3:2 宽高比 */
  overflow: hidden;
  cursor: pointer;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-image:hover {
  transform: scale(1.05);
}

.sold-out-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-desc {
  font-size: 12px;
  color: #999;
  height: 36px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price-container {
  margin-bottom: 12px;
}

.product-price {
  font-size: 18px;
  color: #f56c6c;
  font-weight: bold;
}

.product-original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}

.product-actions {
  display: flex;
  justify-content: space-between;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-price-container {
  margin: 20px 0;
}

.detail-price {
  font-size: 24px;
  color: #f56c6c;
  font-weight: bold;
}

.detail-original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
  margin-left: 12px;
}

.detail-stock,
.detail-sales {
  margin-bottom: 10px;
  color: #666;
}

.detail-desc {
  margin: 20px 0;
}

.detail-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
}

.detail-actions .el-input-number {
  margin-right: 20px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>